<template>
  <div class="lesson-catalogue">
    <div class="lesson-catalogue-container">
      <div class="catalogue-header">共{{ subLessonCounts }}节课</div>
      <div class="lesson-chapter" v-for="chapter in list" :key="chapter.label">
        <div class="chapter-header">{{ chapter.label }}</div>
        <div class="chapter-body">
          <div class="chapter-quarters">
            <div
              class="quarters-item quarter"
              :class="{ 'is-playing' : quarter.subLessonId === play.playVideoId}"
              v-for="(quarter, $index) in chapter.children"
              :key="quarter.subLessonId"
              @click="handleClickVideoPlayer(quarter)"
            >
              <!-- 章节播放图标 -->
              <span class="quarter-icon">
                <!-- 所有的都存在图片 -->
                <text>{{$index + 1}}</text>
              </span>
              <span class="quarter-content ui-1px-b">
                <view class="quarter-name van-ellipsis ui-txt">
                  <!-- 课程章节名称 -->
                  <span
                    class="quarter-name--palying"
                    v-if="quarter.subLessonId === play.playVideoId && play.status === 1"
                  >[ 播放中... ]&emsp;</span>
                  <span class>{{ quarter.subLessonName }}</span>
                </view>
                <view class="quarter-action">
                  <!-- 免费试听按钮 -->
                  <!-- <span class="quarter-action--free" v-if="quarter.free">免费试听</span> -->
                  <!-- 章节时长 -->
                  <span
                    class="quarter-action--time ui-txt txt-caption-sm"
                  >时长：{{ quarter.lessonTime }}</span>
                </view>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="lesson-noMore">没有更多</div> -->
  </div>
</template>

<script>
export default {
  name: "lessonCatalogue",
  props: {
    play: {
      type: Object,
      default() {
        return {};
      }
    },
    subLessonCounts: [String, Number],
    lessonId: [String, Number],
    subLessonId: [String, Number],
    playing: {
      type: [String, Number],
      default: 0
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      menuListOther: [],
      timer: null,
      fnScroll: null
    };
  },
  created() {
    _this = this;
  },
  mounted() {},
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    handleClickVideoPlayer(item) {
      let _this = this;
      // this.root && (this.root.autoplay = true);
      uni.showModal({
        title: item.subLessonName,
        content: `是否切换到${item.subLessonName}`,
        success: function(res) {
          if (res.confirm) {
            _this.$emit("player", { ...item });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.lesson-catalogue {
  background-color: #fff;
  margin-bottom: 1.307rem;

  .catalogue-header {
    height: 80rpx;
    font-size: 28rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 80rpx;
    letter-spacing: 0px;
    color: #7b8196;
    padding-left: 30rpx;
  }
  .lesson-chapter {
    position: relative;
    &:last-child {
      border-bottom: #e7e7f0 1rpx solid;
    }
    .chapter-header {
      width: 750rpx;
      height: 100rpx;
      background-color: #f6f6fb;
      font-size: 28rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 100rpx;
      color: #2c2c35;
      padding-left: 30rpx;
      box-sizing: border-box;
      border-top: #e7e7f0 1rpx solid;
      border-bottom: #e7e7f0 1rpx solid;
    }
    .chapter-body {
      padding: 0 0 0 30rpx;
      box-sizing: border-box;
    }
    .quarter {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 720rpx;
      min-height: 95rpx;
      font-size: 28rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 95rpx;
      color: #2c2c35;
      // padding-left: 30px;
      padding-right: 30rpx;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
  .quarter {
    display: flex;
    flex-direction: row;
    align-items: center;

    .quarter-icon {
      flex: 0 0 60rpx;
      vertical-align: middle;
      color: $color-text-placeholder;
      font-weight: bold;
      font-size: 30rpx;
      font-style: italic;
    }
    .quarter-content {
      flex: 1;
      max-width: 667rpx;
      padding: 16rpx 0;
      .quarter-name {
        color: $color-text-base;
        line-height: 40rpx;

        .quarter-name--palying {
          margin-right: 10rpx;
        }
      }
      .quarter-action {
        margin-top: 10rpx;
        text-align: left;
        line-height: 24rpx;
        .quarter-action--time {
        }
        .quarter-action--free {
          display: inline-block;
          width: 134rpx;
          height: 49rpx;
          border-radius: 3rpx;
          border: solid 2rpx #49af4f;
          font-size: 24rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 49rpx;
          letter-spacing: 0px;
          color: #49af4f;
          text-align: center;
        }
      }
    }

    &:last-child {
      .quarter-content::after {
        display: none;
      }
    }
    &.is-playing {
      .quarter-name {
        color: $brand-primary !important;
      }
    }
  }

  .lesson-noMore {
    height: 1.44rem;
    line-height: 1.44rem;
    width: 100%;
    text-align: center;
    color: #7b8196;
    font-size: 0.373rem;
    margin-top: -2px;
  }
}
</style>
